*{margin: 0;padding: 0;
}
body{background: #251037 url("") center center;background-size: cover;
}
.bg1{background-Image: url(""); background-color:#251037;
}
.bg2{background-Image:url("img/bg1.jpg")
}
.bg3{background-Image:url("img/bg2.jpg")
}
.bg4{background-Image:url("img/bg3.jpg")}
header{height: 20vh;
}
header >h1{text-align:center;font-family:Helvetica;color:white;line-height: 40vh;
}
#bgTool{position: fixed;width: 100px;height: 100px;background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 0%,#db36a4 21%,#db36a4 47%,#db36a4 73%,#db36a4 100%,#db36a4 100%,#db36a4 100%,#a80077 100%);border-radius: 50%;top: -50px;right: -50px;
}
#bgTool:hover{opacity: 0.8;box-shadow: 0 0 4px 4px #cb60b3;transform: scale(1.25);transition: all 0.3s;
}
main{height: 80vh;display: flex;justify-content: center;align-items: center;
}
#keyBoard{display: inline-block;background: rgba(37,16,55,0.4);border-radius: 10px; padding: 15px;
}
#keyBoard:hover{box-shadow: 0px 0px 3px 3px black; transition:all 0.3s;
}
.clearfix::after{content: '';display: block;clear: both;
}
kbd{width: 48px;height: 48px;border: 1px solid #2b1a3e;box-shadow: 4px 4px 2px 0 black;text-transform: uppercase;font-weight: bold;display: flex;justify-content: center;align-items: center;background: #322447;color: #ffffff;border-radius: 8px;font-family: Helvetica;font-size: 29px;margin:4px 5px;
}
.kbd-wrapper:hover kbd{box-shadow: 0 0 0 0 black;transition: box-shadow, 0.2s;
}
#keyBoard >div:nth-child(1) >.kbd-wrapper:nth-child(-n+5) >kbd{border: 1px solid #5f1633;box-shadow: 4px 4px 2px 0 black;    background: #d2232a;    
}
#keyBoard >div:nth-child(1) >.kbd-wrapper:nth-child(-n+5):hover >kbd{box-shadow: 0 0 0 0 black;
}
.kbd-wrapper{float: left; position: relative;
}
.kbd-wrapper >img{position: absolute;width: 16px;height: 16px;bottom: 10%;left: 10%;
}
button{font-family:Helvetica; border-radius: 0px; background: lightgrey;position: absolute;border: none;    bottom: 10%;right: 10%;display: none;
}
.kbd-wrapper:hover >button{display: inline-block;
}
#keyBoard >div:nth-child(2){padding-left: 2em;
}
#keyBoard >div:nth-child(3){padding-left: 4em;
}